import React, { useState } from 'react';
import styles from './Carousel.module.css';
import { Image, Carousel as AntCarousel, Skeleton } from 'antd';
import { useNavigate } from "react-router-dom"
interface listType {
  dr: "",
  id: "",
  imgUrl: ""
  productId: ""
  ts: ""
  userId: ""
}

type Props = {
  children?: JSX.Element;
  list?: Array<listType>[]
};


export const Carousel: React.FC<Props> = ({ list }: any) => {
  const navigate = useNavigate()
  const goDetail = (item: any) => {
    navigate(
      '/detail',
      { state: { id: item.id } }
    )
  }

  return (
    <div>
      {
        list.length <= 0 ? <Skeleton active /> : <AntCarousel autoplay className={styles.slider}>
          {list.map((imagePath) => (
            <img onClick={() => { goDetail(imagePath) }} src={imagePath.imgUrl} alt="Image" key={imagePath.id} />
          ))}
        </AntCarousel>
      }
    </div>

  )
}
